1 00:00:00,660 --> 00:00:03,220 Hello and welcome to this lecture. 2 00:00:03,420 --> 00:00:14,050 In this lecture hall will be creating a function that we will use to draw the bricks to save some time. 3 00:00:14,070 --> 00:00:25,410 I have already pre written the code to draw the bricks on the campus so that is from line 71 to line 4 00:00:25,580 --> 00:00:27,380 85. 5 00:00:28,140 --> 00:00:37,410 What this function will do the function will loop through the bricks inside the Arey and then paint 6 00:00:37,500 --> 00:00:41,710 or draw them on the canvas. 7 00:00:41,740 --> 00:00:44,060 All right let's go through them quickly. 8 00:00:44,310 --> 00:00:51,860 The first part includes the four look you may be familiar with already from our previous lecture. 9 00:00:52,200 --> 00:00:56,730 So we create the function you queer the function by type in the front. 10 00:00:56,760 --> 00:01:01,130 The word function followed by the name of the function. 11 00:01:01,260 --> 00:01:08,610 Again always a good idea to name your functions closely related to what the. 12 00:01:08,630 --> 00:01:20,280 Do so this function is called draw in bricks and inside the parentheses we specified the Param if there's 13 00:01:20,280 --> 00:01:22,260 a what it will do. 14 00:01:22,760 --> 00:01:23,660 What if. 15 00:01:23,660 --> 00:01:33,270 So for example to draw the bricks or indeed breaks on the come that's the function will loop through 16 00:01:33,350 --> 00:01:43,920 the phone up to start here and check to see if there's any column of the column count is 0 and the column 17 00:01:43,920 --> 00:01:47,310 is less than the column count. 18 00:01:47,310 --> 00:01:51,360 It will add a column. 19 00:01:51,360 --> 00:01:57,360 It does that each time on till the number specified column has been rushed. 20 00:01:57,420 --> 00:01:59,650 Same thing for the rolls. 21 00:01:59,710 --> 00:02:05,390 He checks to see if the rule the rule number is zero. 22 00:02:05,640 --> 00:02:17,370 Also if the roll is less than the brick row if it is less than the brick road count it all dent add 23 00:02:17,520 --> 00:02:25,710 one this plus plus means add 1 each time you go out with a loop so it will keep adding each column and 24 00:02:25,710 --> 00:02:36,370 each row each time it goes to a loop until the specified number of column and rules has been achieved. 25 00:02:36,600 --> 00:02:43,470 I have also created another variable here on 974 called Brick x. 26 00:02:43,640 --> 00:02:54,080 Notice X is a upper case saw the value of the brick break X is source to a column. 27 00:02:55,740 --> 00:02:57,210 Times. 28 00:02:57,790 --> 00:03:11,420 Okay so you add the brick with bloss the pad padding plus the offset left and then form variable brick 29 00:03:11,450 --> 00:03:13,480 why you add. 30 00:03:13,480 --> 00:03:26,800 You multiply the brick height block brick padding blocks the brick offset top by the roll so each break. 31 00:03:26,880 --> 00:03:41,640 X position is carlye worked out or calculated by the break with bloss the brake pad in multiplied by 32 00:03:41,700 --> 00:03:49,770 the rule number C plus the brake offset left or right. 33 00:03:49,930 --> 00:03:53,110 So the logic for the break why. 34 00:03:53,160 --> 00:03:58,390 He's also similar for the brake X.. 35 00:03:58,680 --> 00:04:05,330 The only difference is that we use the column number and we use the rule. 36 00:04:05,420 --> 00:04:12,470 Are for the brick height and we've the break of set top. 37 00:04:12,930 --> 00:04:21,660 So what will happen is that every single break that is created this time the loop goes around will be 38 00:04:21,690 --> 00:04:27,960 positioned in the correct place because of these values we have specified here. 39 00:04:28,000 --> 00:04:32,340 The brick weaved block of brick padding it will never lead to position. 40 00:04:32,370 --> 00:04:34,000 Each bridge brick. 41 00:04:34,260 --> 00:04:43,560 Each time it goes or eatery's true the loop on till despose five number of rows and column has been 42 00:04:43,650 --> 00:04:44,970 achieved. 43 00:04:45,820 --> 00:04:48,070 The brick offset. 44 00:04:48,420 --> 00:04:57,180 Top of said left is used to specify where the break his position because we the one the breaks position 45 00:04:57,180 --> 00:04:59,280 to close to the edge of the canvas. 46 00:04:59,520 --> 00:05:09,150 So by specifying that it come give some space before it starts painting or created the bricks on the 47 00:05:09,150 --> 00:05:10,040 comeback. 48 00:05:10,370 --> 00:05:14,100 All right so what's all there has been specify. 49 00:05:14,400 --> 00:05:24,900 Then here we've caught the values here break see see here inside the oury are here value inside the 50 00:05:24,900 --> 00:05:33,980 Green Dot kecks equal of brick X upper case and then breaks for the break c inside this Harry and then 51 00:05:33,980 --> 00:05:35,840 brick are dot. 52 00:05:35,860 --> 00:05:37,800 Why give you break. 53 00:05:37,920 --> 00:05:38,810 Why. 54 00:05:38,850 --> 00:05:44,670 So these are the individual breaks and the position of coordinates on the x and y. 55 00:05:44,880 --> 00:05:50,070 So once we've got those values sorted we can now begin to draw the bricks. 56 00:05:50,190 --> 00:05:57,230 He is in the context of begin part of meffert and then we use the quantities are wrecked. 57 00:05:57,530 --> 00:05:58,920 No we specify the value. 58 00:05:58,990 --> 00:06:06,840 Break X comma and prick Y and then were the brick with it and then break right where the context fulfils 59 00:06:06,890 --> 00:06:10,000 time which is used to specify the clock. 60 00:06:10,230 --> 00:06:12,590 You want to use for the brick. 61 00:06:12,780 --> 00:06:19,440 So you defined the column here and the context or feel is used to do the colouring of fill the column 62 00:06:20,040 --> 00:06:29,620 and then as usual all n the do I with the context dot close path taking the care that we have finished. 63 00:06:29,760 --> 00:06:40,470 So one does is save all we've done so far on the javascript page to save that and then we can view in 64 00:06:40,470 --> 00:06:41,840 our web browser. 65 00:06:42,990 --> 00:06:48,400 Because this is linked to his team of Firewalker I'll run it directly from the script. 66 00:06:48,570 --> 00:06:53,170 We need to look at our history file and run the Web. 67 00:06:53,160 --> 00:06:56,670 The game. 68 00:07:00,720 --> 00:07:03,370 So that's it for this lecture. 69 00:07:03,420 --> 00:07:05,450 Thank you so much for your time. 70 00:07:05,450 --> 00:07:06,300 Bye for now.